<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('修改密码')" />
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > 找回密码</p>
    </div>
    <div class="forget_form" id="step1">
        <h1>找回登陆密码</h1>
        <p>请输入您需要找回登录密码的账户名</p>

        <form th:if="${isphone || isemail}">
            <input class="ui-text" type="text" id="username" name="username" th:attr="placeholder=${isphone && isemail}?'电子邮箱/手机号码':(${isphone}?'手机号码':'电子邮箱')" autocomplete="off" disableautocomplete autofocus data-valid data-must="请输入帐号" data-sever="/c/user_valid" data-sever-msg="用户不存在"/><span></span>
            <div class="forget-yzm">
                <input class="ui-text" type="text" id="captcha" name="captcha" placeholder="验证码" autocomplete="off" disableautocomplete data-valid data-must="请输入验证码" data-sever="/c/ycaptcha" data-sever-msg="验证码不正确"><span></span>
                <img th:src="@{/captcha/captchaImage(type=math)}" />
            </div>
            <div id="btn_next1" class="ui-btn ui-btn-blue">下一步</div>
        </form>
    </div>
    <div  class="forget_form" id="step2_0" style="display:none">
        <h1>找回登陆密码</h1>
        <p>为了保护帐号安全，需要手机账号有效性</p>
        <div class="tip">点击发送验证码按钮，系统将会发送验证码短信到您的手机上<i>155******45</i></div>
        <div id="btn_next2_0" class="ui-btn ui-btn-blue" data-server="/sendcode/phone/f">发送验证码</div>
    </div>
    <div  class="forget_form" id="step2_1" style="display:none">
        <h1>找回登陆密码</h1>
        <p>为了保护帐号安全，需要邮箱账号有效性</p>
        <div class="tip">点击发送验证码按钮，系统将会发送验证码邮件到您的邮箱上<i>50245077@qq.com</i></div>
        <div id="btn_next2_1" class="ui-btn ui-btn-blue" data-server="/sendcode/email">发送验证码</div>
    </div>
    <div  class="forget_form" id="step2_2" style="display:none">
        <h1>找回登陆密码</h1>
        <p>第三方登录用户，暂时不能修改密码</p>
        <div class="tip">您可以绑定邮箱或手机号，用手机或邮箱登录</div>
    </div>
    <div class="forget_form" id="step3" style="display:none">
        <h1>找回登陆密码</h1>
        <p>为了保护帐号安全，需要账号有效性</p>
        <form>

            <div class="forget-yzm">
                <input class="inout1" value="" type="hidden" />
                <input class="ui-text" type="text" id="yzm" name="yzm" placeholder="请输入验证码"  data-valid data-must="请输入验证码" data-sever="/yyzm" data-sever-msg="验证码不正确"><span></span>
                <input class="ui-text" type="password" id ="password" name="password" placeholder="密码" data-valid data-must="请输入密码" th:attr="data-length=${regset.pwdLength}+'-50',data-length-msg='密码最低'+${regset.pwdLength}+'位',data-reg=${regset.pwdNum} > 0?'\d+':'',data-reg-msg=${regset.pwdNum} > 0?'密码必须包含数字' :'',data-reg1=${regset.pwdLower} > 0?'[a-z]+':'',data-reg-msg1=${regset.pwdLower} > 0?'密码必须包含小写字母' :'',data-reg2=${regset.pwdUpper} > 0?'[A-Z]+':'',data-reg-msg2=${regset.pwdUpper} > 0?'密码必须包含大写字母' :''"><span></span>
                <input class="ui-text" type="password" id="password2" name="password2" placeholder="确认密码" data-valid data-must="请再次输入密码" data-equ="#password"><span></span>
            </div>
            <div id="btn_ok" class="ui-btn ui-btn-blue">完成</div>
        </form>
    </div>
</div>
<th:block th:include="pc/include :: footer" />
<script>
    $(function () {
        $("#btn_next1").click(function () {
            $("#step1 form").find("input[data-valid]").trigger("change");
            if ($("#step1 form").find(".error").length !== 0)
                return;

            $("#step1").hide();
            var username = $("#username").val();
            if (username.isphone()) {
                $("#step2_0 i").text(username);
                $(".inout1").val(username);
                $("#step2_0").show();

            }else if (username.isemail()) {
                $("#step2_1 i").text(username);
                $(".inout1").val(username);
                $("#step2_1").show();
            } else {
                //$("#step2_2 i").text(username);
                $("#step2_2").show();
            }
        });

        $("#btn_next2_0,#btn_next2_1").click(function (e) {
            e.preventDefault();
            var $this = $(this);
            if ($this.hasClass("disable") || $this.hasClass("doing"))
                return;
            $this.addClass("doing");

            var username = $("#username").val();
            var data_server = $(this).attr("data-server");

            $.post(data_server, {username: username}, function (data) {
                if (data == 1) {
                    $this.parent().hide();
                    $("#step3").show();
                } else {
                    Message("发送验证码失败");
                }
                $this.removeClass("doing");
            });
        });


        $("#btn_ok").click(function () {
            $("#step3 form").find("input[data-valid]").trigger("change");
            if ($("#step3 form").find(".error").length !== 0)
                return;
            $.ajax({
                url: "/change/password",
                type: "post",
                data: {username: $("#username").val(), captcha: $("#captcha").val(), yzm: $("#yzm").val(), password: $("#password").val()},
                success: function (data) {
                    if (data) {
                        Message("修改密码成功，请重新登录...", "", function () {
                            location.href = "/logout";
                        });
                    } else {
                        Message("验证码错误");
                    }
                }
            });
        });
    });
</script>